import React, { PureComponent, Fragment } from 'react';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Button,
  Modal,
  Tag,
  message,
  Table,
  Radio,
  TreeSelect,
  Icon,
} from 'antd';

const FormItem = Form.Item;
const { Option } = Select;
const { CheckableTag } = Tag;
const Search = Input.Search;
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;
import StandardTableO from 'components/StandardTableO';

@Form.create()
export default class ScoreGoodsModal extends PureComponent {
  constructor(props) {
    super(props);
  }

  state = {
    selectedRowKeys: []
  };

  componentWillReceiveProps(nextProps) {
    // console.log('componentWillReceivePropscomponentWillReceiveProps', nextProps.goodsId)
    let list = [];
    if (nextProps.goodsId && (nextProps.goodsId != this.props.goodsId)) {
      let one = {}
      one['goodsId'] = nextProps.goodsId;
      one['goodsName'] = nextProps.goodsName;
      list.push(one)
      this.setState({
        selectedRowKeys: list
      })
    }
  }


  handleSelectRows = row => {
    console.log('选择数据', row)
    this.setState({ selectedRowKeys: row })
  };

  _okHandle() {
    
    if (this.state.selectedRowKeys && (this.state.selectedRowKeys.length > 0)) {
      this.props.goodsOk(this.props.current, this.state.selectedRowKeys);
      this.setState({
        selectedRowKeys: []
      })
    } else {
      message.error('请选择商品')
      return;
    }
  }

  _cancel() {
    this.props.setModalVisible(0, false);
    this.setState({
      selectedRowKeys: []
    })
  }

  _query() {
    this.props.goodsSearch(this.props.form.getFieldsValue())
  }

  render() {
    const { record } = this.props;

    const tableData = {};
    tableData['list'] = this.props.scoreGoodsList;
    tableData['pagination'] = { pagination: false };

    const columns = [
      {
        title: '商品名称',
        dataIndex: 'goodsName',
        key: 'goodsName',
      },
      {
        title: '类目',
        dataIndex: 'catName',
        key: 'catName',
      },
    ]

    return (
      <Modal
        width={700}
        destroyOnClose
        title="选择商品"
        visible={this.props.goodsModalVisible}
        afterClose={() => { }}
        onOk={() => this._okHandle()}
        onCancel={() => this._cancel()}
      >
        <Form layout="inline">
          <Row >
            <Col md={8} >
              <FormItem labelCol={{ span: 10 }} wrapperCol={{ span: 14 }} label="类目">
                {this.props.form.getFieldDecorator('catId', { initialValue: 'undefined' })(
                  <Select style={{ width: '100px' }}>
                    <Option value="undefined">全部</Option>
                    {
                      (this.props.categoryList && this.props.categoryList.length > 0) ?
                        this.props.categoryList.map((item, i) => {
                          return (
                            <Option key={i} value={item.catId}>{item.catName}</Option>
                          )
                        })
                        : null
                    }
                  </Select>
                )}
              </FormItem>
            </Col>

            <Col md={8}>
              <FormItem labelCol={{ span: 10 }} wrapperCol={{ span: 14 }} label="商品名称">
                {this.props.form.getFieldDecorator('goodsName')(<Input style={{ width: '100%' }} />)}
              </FormItem>
            </Col>
            <Col md={5}>
              <Button type="primary" htmlType="submit" onClick={() => this._query()} >
                查询
              </Button>
            </Col>
          </Row>
        </Form>
        <div style={{ height: '400px', overflow: 'auto' }}>
          <StandardTableO
            bordered={true}
            selectedRows={this.state.selectedRowKeys}
            onSelectRow={this.handleSelectRows}
            rowKey={"goodsId"}
            data={tableData}
            pagination={false}
            columns={columns}
            page={'no'}
          />
        </div>


      </Modal>
    );
  }
}